<template>
    <div class="top_bar">
        <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
        <div class="search">
            <el-input v-model="search_input" placeholder="热门商品" :prefix-icon="Search" />
            <div class="search_btn">
                <v-btn class="search_btn_v" :ripple="false" height="5vh" min-width="12vh">
                    <v-avatar size="40" image="https://bu.dusays.com/2024/10/31/67231ef608442.png"></v-avatar>
                </v-btn>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="cart_box">
            <div class="cart_head" style="display: flex;">
                <el-icon class="back" @click="router.push('/user')" style="margin-left: 1vh;margin-top: 2vh;" size="35"
                    color="green">
                    <Back />
                </el-icon>
                <h2 style="color: green;font-weight: normal;margin: auto;">购物车</h2>
            </div>
        </div>
        <div class="all_item" style="width: 80%;margin: auto;background-color: white;">
            <br>
            <h2 style="margin-left: 5vh;color: green;">全部商品&nbsp;({{ cart_list.length }})</h2>
        </div>
        <div class="cart_body">
            <div class="left_box">
                <div class="cart" v-for="card in cart_list" :key="card.cart.cartID">
                    <div style="margin-top: 0vh;" class="room">
                        <a href="">{{ card.room.roomName }}</a>
                        <el-icon style="position: relative;top: 0.3vh;">
                            <ArrowRight />
                        </el-icon>
                        <!-- <span>&nbsp;&nbsp;&nbsp;&nbsp;订单号:{{ card.cart.trackingNumber }}</span> -->
                    </div>
                    <div class="item">
                        <div class="item_img" style="display: flex;gap: 1vh;">
                            <el-checkbox v-model="card.cart.checked" @change="handleCheckChange(card)" size="large"
                                style="margin: auto;" />
                            <el-image @click="jumpDetail(card.item.itemID)"
                                style="width: 100px; height: 100px;border-radius: 10px;"
                                :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${card.item.itemImg}.jpg`"
                                fit="cover" />
                        </div>
                        <div class="item_name">
                            <span>{{ card.item.itemName }}</span>
                        </div>
                        <div class="item_size">
                            <span>3-5斤</span>
                        </div>
                        <div class="item_price">
                            <span style="color: red;">￥{{ parseFloat(card.item.itemPrice).toFixed(1) }}</span>
                        </div>
                        <div class="item_rate" style="margin-right:2vh;">
                            <el-input-number v-model="card.cart.quantity" :min="1" :max="10" />
                        </div>
                    </div>
                    <div class="cart_btn" style="float: right;margin-right: 3vh;">
                        <a style="color: green;" href="">移入收藏夹</a>
                        &nbsp;
                        <a @click="deleteCart(card.cart.cartID)" style="color: green;">删除</a>
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="cal_box">
                    <span style="font-size: 2.5vh;font-weight: bold;color: rgb(6, 77, 6);margin-left: 4vh;">结算明细</span>
                    <div class="buy_card"
                        style="display: flex;flex-wrap:wrap;column-gap:2vh;align-items: flex-start;justify-content: center;height: 40%;">
                        <div v-for="items in selectItems" :key="items.cart.cartID">
                            <el-image class="cal_img"
                                style="width: 80px; height: 80px;border-radius: 10px;object-fit: cover;"
                                :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${items.item.itemImg}.jpg`"
                                fit="cover" />
                        </div>
                    </div>
                    <div class="total_box">
                        <span style="font-size: 3vh;font-weight: bold;color: green;padding: 2vh;">商品总价:<span
                                style="color: red;position: relative;float: right;padding-right: 2vh;">￥{{
                                    totalPrice.toFixed(2) }}</span></span>
                    </div>
                    <div class="buy_btn" style="display: flex;">
                        <el-button style="width: 30vh;height: 5vh;margin: auto;margin-top: 5vh;"
                            type="success">立即下单</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>

<script setup>
import Footer from '@/component/Footer.vue'
import request from '../../utils/request';
import { Calendar, Search } from '@element-plus/icons-vue'
import { onMounted, reactive } from "vue";
import { ref } from 'vue'
import router from '../../router/index.js'
import { ElNotification } from 'element-plus'

const num = ref(1)
const search_input = ref('')
const cart_list = ref([])

const selectItems = ref([]);

const totalPrice = ref(0);

const handleCheckChange = (card) => {
    if (card.cart.checked) {
        selectItems.value.push(card);
        console.log(selectItems.value);
        totalPrice.value += card.item.itemPrice * card.cart.quantity;
        console.log(totalPrice.value);
    }
    else {
        selectItems.value = selectItems.value.filter(items => items.cart.cartID !== card.cart.cartID);
        totalPrice.value -= card.item.itemPrice * card.cart.quantity;
        if (totalPrice.value < 0) {
            totalPrice.value = 0;
        }
    }
}

const deleteCart = (cartID) => {
    request.delete(`/api/user/DeleteCartItem/${cartID}`).then(res => {
        console.log(res.data);
        if (res.data == 200) {
            ElNotification({
                title: '成功',
                message: '删除商品成功',
                type: 'success',
            })
            router.go(0);
        }
    })
}

const jumpDetail = (itemId) => {
    router.push(`/desc/${itemId}`).then(() => {
        window.scrollTo(0, 0);
    });
};

onMounted(() => {
    const loading = ElLoading.service({
        lock: true,
        text: '吱吱正在努力翻看您的购物车...',
        background: 'rgba(0,0,0,0.7)'
    })

    const uid = sessionStorage.getItem('uid');
    const uidObj = JSON.parse(uid);
    request.get(`/api/user/selectUserCart/${uidObj}`).then(res => {
        cart_list.value = res.data;
        console.log(cart_list.value);
        loading.close();
    })
})
</script>

<style scoped>
.body {
    background-color: #E8E8E8;
}

.top_bar {
    width: 100%;
    height: 10vh;
    /* background-color: wheat; */
    display: flex;
}

.top_bar img {
    width: 20vh;
    height: auto;
    margin-left: 20vh;
}

.top_bar .search {
    width: 100vh;
    margin: auto;
    margin-left: 10vh;
    display: flex;
}

.search_btn {
    display: flex;
}

.search .search_btn .search_btn_v {
    margin-left: 2vh;
    background-color: green;
    font-size: 2vh;
    font-weight: bold;
    border-radius: 20px;
}

.back {
    transition: transform 0.3s ease;
}

.back:hover {
    transform: scale(1.1);
}

.cart_box {
    width: 80%;
    background-color: white;
    margin: auto;
}

.cart_body {
    display: flex;
    width: 80%;
    height: 80vh;
    margin: auto;
}

.left_box {
    background-color: white;
    width: 60%;
    max-height: 100%;
    overflow-y: auto;
}

.cart {
    background-color: white;
    width: 100%;
    height: 20vh;
}

.cart:hover {
    background-color: rgba(247, 247, 247, 0.801);
}

.room {
    margin-left: 5vh;
}

.item {
    display: flex;
    margin-left: 1vh;
    margin-top: 1vh;
    align-items: center;
    justify-content: center;
    gap: 8vh;
}

.item_name {
    color: green;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 20vh;
}

.item_size {
    color: rgb(137, 137, 137);
}

.right_box {
    width: 40%;

    background-color: white;
}

.cal_box {
    width: 85%;
    height: 92%;
    margin: auto;
    margin-top: 0.8vh;
    border-radius: 10px;
    background-color: white;
    border: #E8E8E8 4px solid;
}

.cal_img {
    transition: transform 0.3s ease;
}

.cal_img:hover {
    transform: scale(1.1);
}
</style>

